<template>
	<div id='system' v-loading="loading">
		<div class="content-top">
			<span class="h1">基础管理</span>
			<span class="h2">推广渠道</span>
		</div>
		<div class="top-btn clearfix">
			<div class="left-content">
				<!--<span class="tip">商家列表</span>-->
			</div>
			<div style="float:left">
				<el-button type="primary" @click="addPop()">渠道添加</el-button>
			</div>
			<div class="right-search1">
				<!--<el-input v-model="input" placeholder="输入关键词…"></el-input>-->
				<el-button type="primary" @click="excel()">导出excel</el-button>
			</div>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="POPParam" label="推广参数">
			</el-table-column>
			<el-table-column prop="Url" label="推广地址">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link"><el-button type="primary">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button></span>
						<el-dropdown-menu slot="dropdown" class="div">
							<el-dropdown-item>
								<el-button type="success" size="small" @click="modiypop(scope.row.ID)">修改</el-button>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-button type="danger" size="small" @click="delpop(scope.row.ID)">删除</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<div class="pages">
			<el-pagination small :current-page="index" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background prev-text='上一页' next-text='下一页'>
			</el-pagination>
		</div>
		<!--添加弹框-->
		<el-dialog title="渠道添加" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="参数值:">
						<el-input v-model="formLabelAlign.param"></el-input>
					</el-form-item>
					<el-form-item label="链接地址:">
						<el-input v-model="formLabelAlign.urls"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="newsPop()">确 定</el-button>
			</span>
		</el-dialog>
		<!--修改弹框-->
		<el-dialog title="渠道修改" :visible.sync="mark" width="30%" :before-close="handleClose">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="参数值:">
						<el-input v-model="formLabelAlign.param"></el-input>
					</el-form-item>
					<el-form-item label="链接地址:">
						<el-input v-model="formLabelAlign.urls"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="mark = false">取 消</el-button>
			    <el-button type="primary" @click="editPop()">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import api from '../../../api/api'
	export default {
		name: 'pop',
		data() {
			return {
				index:1,
				total:1,
				loading:false,
				labelPosition: 'left',
				formLabelAlign: {
					param: '',
					urls: '',
				},
				dialogVisible: false, //添加弹框
				input: '',
				tableData: [],
				mark: false, //渠道修改
				id: '',
			}
		},
		created() {
			this.getpoplist()
		},
		methods: {
			excel(){
				this.loading=true
				this.$axios.post(api.getpoplist, {
					"Para": "",
					"PageSize": 10,
					"PageIndex": this.index-1,
					"OrderbyString": "POPParam",
					"ToExcel": true,
				}).then(res => {
					if(res.data.isOK){
						if(res.data.data.ExcelResult && res.data.data.ExcelResult.isOK) {
							this.loading = false
							var urls = res.data.data.ExcelResult.data.filePath
							window.location.href = api.host+'/template/'+urls
						} else{
							this.loading = false
							this.$message.error(res.data.data.ExcelResult.msg);
						}
					}else{
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//翻页
			handleCurrentChange(val){
				this.loading=true
				this.index = val
				this.$axios.post(api.getpoplist, {
					"Para": "",
					"PageSize": 10,
					"PageIndex": this.index-1,
					"OrderbyString": "POPParam",
					"ToExcel": false
				}).then(res => {
					if(res.data.isOK){
						this.loading=false
						this.tableData = res.data.data.Data
					}else{
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			//获取推广列表
			getpoplist() {
				this.loading=true
				this.$axios.post(api.getpoplist, {
					"Para": "",
					"PageSize": 10,
					"PageIndex": this.index-1,
					"OrderbyString": "POPParam",
					"ToExcel": false
				}).then(res => {
					if(res.data.isOK){
						this.loading=false
						this.tableData = res.data.data.Data
					}else{
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//添加渠道
			addPop() {
				this.formLabelAlign.param=''
				this.formLabelAlign.urls=''
				this.dialogVisible = true
			},
			//确定添加
			newsPop(){
				this.loading=true
				this.$axios.post(api.addpop, {
					"POPParam": this.formLabelAlign.param,
					"Url": this.formLabelAlign.urls
				}).then(res => {
					if(res.data.isOK) {
						this.loading = false
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						this.getpoplist();
						this.dialogVisible = false;
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//修改
			modiypop(id) {
				this.id = id
				this.getpopmodel(this.id)
				this.mark = true
			},
			//获取模型
			getpopmodel(id) {
				this.$axios.get(api.getpopmodel + '/' + id).then(res => {
					if(res.data.isOK) {
						this.id = res.data.data.ID
						this.formLabelAlign.param = res.data.data.POPParam
						this.formLabelAlign.urls = res.data.data.Url
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//确认修改
			editPop() {
				this.loading=true
				this.$axios.post(api.editpop,{
					"ID": this.id,
					"POPParam": this.formLabelAlign.param,
					"Url": this.formLabelAlign.urls
				}).then(res => {
					if(res.data.isOK) {
						this.loading = false
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.getpoplist();
						this.mark = false;
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			},
			//删除
			delpop(id) {
				this.loading=true
				this.$axios.get(api.delpop + '/' + id).then(res => {
					if(res.data.isOK) {
						this.loading=false
						this.getpoplist();
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/admin'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>